import React from "react"
import ReactDOM from "react-dom"
import wx from "wx"
import { addErrorListener } from "../../lib/handleError"
import weixinShare from '../../lib/weixinShare';
import AJAX from "../../lib/ajax"
import Tools from "../../lib/tools"
require('../../lib/rem')
require('../MyPackageDeliveryDetail/MyPackageDeliveryDetail.less')
require('./MyPackageTracking.less')
require('../../styles/common.less')
require('../../styles/lux.less')
const IconBlock = require('../MyPackage/components/IconBlock')
const DialogAdress = require('../MyPackage/components/DialogAdress')

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            //数据请求完毕则load_done，若此时数据为空则empty_page
            load_done: false,
            empty_page: false,
            icon_type: ["UP", "MIDDLE", "DOWN"],
            form_data: [],
            page_type: "", //delivery：寄件详情的路由
            url_param: Tools.getParams()
        }
    }
    translateFormData(list=[]) {
        return list.map((item,index)=>{
            let line = {
                date: item.date,
                log: item.desc,
                clock: item.time
            }
            if(index === 0){
                line.type = "DOWN"
            }else if(index + 1 === list.length){
                line.type = "UP"
            }else {
                line.type = "MIDDLE"
            }
            return line
        })
    }
    
    translateAddressData(data) {
        return {
            recipent_name: data.consignee_addr.realname,
            recipent_address: data.consignee_addr.address,
            recipent_phone: data.consignee_addr.phone,
            delivery_name: data.sender_addr.realname,
            delivery_address: data.sender_addr.address,
            delivery_phone: data.sender_addr.phone,
        }
    }

    //普通搜索(默认)
    fetchNormal() {
        const url_param = this.state.url_param
        let service = "express_route_query" 
        let params = {
            exp_code: url_param.package_id,
            express_id: url_param.express_id
        }
        AJAX.request(service, params, (route_data) => {
            let list = route_data.body.list || []
            let form_data = this.translateFormData(list)
            form_data.reverse()
            this.setState({
                form_data,
                load_done: true,
                empty_page: form_data.length === 0
            })
        })
    }

    //寄件详情
    fetchDelivery() {
        const url_param = this.state.url_param
        //请求寄件人和收件人
        AJAX.request("sending_order_detail", {
            order_id: url_param.order_id,
            type: url_param.type || 1
        }, (data) => {
            const address_data = this.translateAddressData(data.body)
            this.setState({
                load_info: true,
                address_data
            })
        })
        //请求基本路由信息
        const service = "order_log"
        const params = { 
            order_id: url_param.order_id
        }
        AJAX.request(service, params, (route_data) => {
            let list = route_data.body || []
            list = list.reverse()
            let form_data = this.translateFormData(list)
            form_data.reverse()
            this.setState({
                form_data,
                load_done: true,
                empty_page: form_data.length === 0
            })
        })
    }

    componentWillMount() {
        addErrorListener()()
        weixinShare.hideAll()
        const url_param = this.state.url_param
        //有两种情况
        //1. 来自搜索(默认)
        //2. 来自寄件详情页面
        if(url_param.page_type === "delivery") {
            this.fetchDelivery()
        }else {
            this.fetchNormal()
        }
    }

    componentDidMount() {
        AJAX.appendBaiduAnalysis()
    }

    makeRow(data) {

        const placeholder_up = data.type === "UP" ? <div className="placeholder-up"></div> : null
        const placeholder_down = data.type === "DOWN" ? <div className="placeholder-down"></div> : null
        const icon = data.type === "UP" ? <i className="iconfont icon-icondian"></i> : <i className="iconfont icon-dian"></i>
        const reset_height = data.type === "DOWN" ? "h100" : ""

        return (
            <div className="form-row">
                <div className="log-time">
                    <div>
                        <div className="date">
                            {data.date}
                        </div>
                        <div className="clock">
                            {data.clock}
                        </div>
                    </div>
                    
                </div>
                <div className="log-icon">
                    <div className={`placeholder-border ${reset_height}`}></div>
                    {placeholder_up}
                    {placeholder_down}
                    {icon}
                </div>
                <div className="log-info">
                    {data.log}
                </div>
            </div>
        )
    }

    makeNormalContent() {
        let content = null
        const rows = this.state.form_data.map(item=>{
            return (this.makeRow(item))
        })
        if(this.state.load_done){
            content = 
                <div className="log-form">
                    {rows}
                </div>
            if(this.state.empty_page){
                content = <IconBlock type="NO-DATA" />
            }
        }
        return content
    }

    makeDeliveryContent() {
        let content = null
        const rows = this.state.form_data.map(item=>{
            return (this.makeRow(item))
        })
        if(this.state.load_done && this.state.load_info){
            content = 
                <div className="log-form">
                    {rows}
                </div>
            if(this.state.empty_page){
                content = <IconBlock type="NO-DATA" />
            }
        }
        return (<div>
            <div className="dialog-wrapper">
                <DialogAdress dataSource={this.state.address_data}/>
                <div className="dw-placeholder"></div>
            </div>
            {content}  
        </div>)
    }
 
    render() {
        
        let content = null
        if(this.state.url_param.page_type === "delivery") {
            content = this.makeDeliveryContent()
        }else {
            content = this.makeNormalContent()
        }
        
        return (
            <div>
                {content} 
            </div>
        )
    }
}
ReactDOM.render(<App />, document.getElementById('app'))
if (module.hot) {
    module.hot.accept();
}